<style scoped lang="scss">
/* 定义了一个名为.homeGoodsDetail的样式类，用于设置商品详情页面的整体样式 */
.homeGoodsDetail {
    width: 100%;
    height: 100%;
    background: #f5f5f5;

    /* 商品图片区域的样式设置 */
  .homeGoodsDetail-img {
        width: 100%;
        height: 4rem;

        img {
            width: 100%;
            height: 100%;
        }
    }

    /* 商品描述相关区域的样式设置，包含价格、标题、详情图片等部分 */
  .homeGoodsDetail-discription {
        width: 100%;
        height: 5rem;

        /* 商品价格展示区域的样式 */
      .homeGoodsDetail-discription-price {
            width: 95%;
            height:.5rem;
            display: flex;
            align-items: center;
            line-height:.3rem;
            background: #ffffff;
            margin-left:.1rem;
            border-radius:.1rem; // 统一设置为一个值，形成圆形弧度，原先是多个值设置不同角的圆角情况
            margin-top:.1rem;

            /* 折扣价格的样式，设置颜色为红色，字体大小等 */
          .discount {
                color: red;
                font-size:.25rem;
                padding-left:.1rem;
            }

            /* 原价的样式，设置颜色为灰色系 */
          .originalPrice {
                color: #8b8989;
                padding-left:.1rem;
            }
        }

        /* 商品标题展示区域的样式，设置字体大小、行高、背景色、圆角等 */
      .homeGoodsDetail-discription-title {
            width: 95%;
            height:.5rem;
            font-size:.2rem;
            line-height:.5rem;
            background: #ffffff;
            margin-left:.1rem;
            border-radius:.1rem; // 同样统一设置为一个值实现圆形弧度
            p {
                padding-left:.1rem;
            }
        }

        /* 商品详情图片展示区域的样式 */
      .homeGoodsDetail-discription-detailimg {
            width: 100%;
            height: 4rem;
            margin-top:.1rem;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    /* 加入购物车等操作按钮所在区域的样式，固定在页面底部 */
  .homeGoodsDetail-jioncar {
        width: 100%;
        height:.5rem;
        position: fixed;
        bottom: 0;
    }
}

.child {
    position: absolute;
    bottom: 0.4rem;
    left: 0.32rem;
}

.img {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    top: 6.22rem;
    left: 1rem;
    opacity: 0;
    z-index: 999;
    border-radius: 50%; // 添加此属性使元素外观为圆形
}

// 添加动画 
@keyframes identifier {
    0% {
        opacity: 1;
        transform: translate(0px, 0px);
        border-radius: 50%; // 在动画各关键帧中都设置圆形弧度，确保动画过程中保持圆形外观
    }

    50% {
        opacity: 1;     
        //                  x        y
        transform: translate(-58px, -120px);
        border-radius: 50%;
    }
    99% {
        opacity: 1;
        border-radius: 50%;
    }

    100% {
        opacity: 0;
        transform: translate(-100px, 0px);
        border-radius: 50%;
    }
}

.cartoon {
    animation: identifier 2.5s 1;
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    top: 6.22rem;
    left: 1rem;
    opacity: 0;
    z-index: 999;
    border-radius: 50%; // 应用动画的元素设置为圆形外观
}
</style>

<template>
    <div class="homeGoodsDetail">
        <img class="img" ref="donghua" src="../../img/购物车空.png" alt="">
        <!-- 展示商品图片 -->
        <div class="homeGoodsDetail-img">
            <img v-lazy="store.carlist.img" alt="">
        </div>

        <div class="homeGoodsDetail-discription">
            <!-- 商品价格展示部分 -->
            <div class="homeGoodsDetail-discription-price">
                <span class="discount"><b>￥{{ store.carlist.discount }}</b></span>
                <span class="originalPrice"><s>￥{{ store.carlist.originalPrice }}</s></span>
            </div>

            <!-- 商品标题展示部分-->
            <div class="homeGoodsDetail-discription-title">
                <p>{{ store.carlist.title }}</p>
            </div>

            <!-- 商品详情图片展示部分， -->
            <div class="homeGoodsDetail-discription-detailimg">
                <img v-lazy="store.carlist.cardetailimg" alt="">
            </div>
        </div>
        <div class="homeGoodsDetail-jioncar">
            <van-action-bar>
                <!-- 购物车图标按钮，点击可跳转到购物车页面，通过@click绑定tocar函数来实现跳转功能 -->
                <van-action-bar-icon icon="cart-o" text="购物车" @click="tocar" /><van-badge class="child"
                    :content="store.carnum">
                    <!-- <div  /> -->
                </van-badge>
                <!-- 加入购物车按钮，点击会触发joinCar函数，将当前商品数据（store.carlist）作为参数传入，用于添加商品到购物车操作 -->
                <van-action-bar-button type="warning" text="加入购物车" @click="joinCar(store.carlist)" />
                <!-- 立即购买按钮，目前仅展示，后续可添加对应购买逻辑 -->
                <van-action-bar-button type="danger" @click="btnBuy(store.carlist.discount, store.carlist.id)"
                    text="立即购买" />
            </van-action-bar>
        </div>

    </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '../../pinia/index'
import { useRouter } from 'vue-router';
// @ts-ignore
import { computed, ref, watch } from 'vue'
import instance from '../../axios/index'
const donghua = ref();
const router = useRouter();
interface CartItem {
    num: number;
}
const listdata = ref<CartItem[]>([]);
const store: any = useCounterStore();
listdata.value = store.caradd
// 计算徽标数量（购物车中商品总数量）
const badgeNum = computed(() => {
    // reduce 方法接受两个参数，第一个参数是一个回调函数，第二个参数是初始值（这里初始值为 0）。
    // 回调函数接受两个参数，第一个参数是累计器（acc），第二个参数是当前元素（item）
    // 遍历数组，将 num 累计到 acc 上，最后返回累计值
    // @ts-ignore
    return listdata.value.reduce((acc, item) => acc + item.num, 0);
})

// 利用watch监听listdata变化，实时更新store.carnum
watch(listdata, () => {
    store.carnum = badgeNum.value;
}, { deep: true });  // 设置deep为true，以便深度监听数组内部元素变化（比如对象属性变化等情况）


// joinCar函数用于处理将商品加入购物车的逻辑
const joinCar = (item: any) => {
    // 在store.caradd数组（假设是存储购物车商品数据的数组）中查找是否已存在相同商品
    // 通过比较商品的id属性（假设商品数据结构中有id用于唯一标识商品，可根据实际调整判断依据）来确定是否为相同商品
    // findIndex方法会返回找到的元素索引，如果没找到则返回 -1
    const arr = store.caradd.findIndex((items: any) => items.id === item.id);
    if (arr!== -1) {
        // 如果找到了相同商品（即arr不等于 -1），说明购物车中已有该商品，将其数量加1
        // 这里考虑到num属性可能初始不存在的情况，使用 || 0 确保是在数值基础上进行加法运算
        store.caradd[arr].num = (store.caradd[arr].num || 0) + 1;
    } else {
        // 如果没找到相同商品（即arr等于 -1），说明是新商品，将其添加到购物车
        // 先给传入的商品对象添加num属性，并初始化为1，表示新商品加入购物车时数量为1
        item.num = 1;
        store.caradd.push(item);
    }
    // 加入购物车动画
    donghua.value.className = "cartoon";
};

// 点击跳转购物车 
const tocar = () => {
    router.push('/car')
}
// 点击立即购买 
const btnBuy = (discount: number, id: number) => {
    let data = {
        id: id,
        price: discount,
    }
    instance.get('/api/pay', { params: data }).then((res) => {
        window.open(res.data.data)
    })
}
</script>